<template>
    <Modal
        :title="platform_id == 1 ? '云丁智能全新电费充值方式' : '切换支付宝账户信息'"
        :value="show"
        :width="640"
        :closable="false"
        :mask-closable="false"
        @on-visible-change="setVisibility">

        <div class="ri-container" >
            <div v-if="platform_id == 1">
            <h3 class="ri-title" @click="handleSuccess" >更安全</h3>
            <p class="ri-content" >
                通过银联专业技术，所有款项直到央行托管账户，无需经过第三方
            </p>

            <h3 class="ri-title" >更智能</h3>
            <p class="ri-content" >
                租客充值，电费T+1自动到账指定收款银行账户
            </p>

            <h3 class="ri-title" >更全面</h3>
            <p class="ri-content" >
                同步支持微信、支付宝、银联云闪付等支付方式
            </p>
            
            <hr>
            </div>
            <h3 class="margin-bottom-20 margin-top-20">商户身份验证</h3>
            <div class="margin-bottom-20">
                商户手机号：{{clientPhone}}
            </div>
            <div class="margin-bottom-20">
                图形验证码：<captcha v-if="show" :reset="reset" @on-success="handleCaptcha" class="ri-captcha"></captcha>
                <Icon type="md-refresh" />
            </div>
            <div class="margin-bottom-20">
                短信验证码：<i-input style="width:200px" v-model="code"></i-input>
                <i-button :loading="sending" @click="handleSmsCode" :disabled="second !== 0">发送验证码{{second > 0 ? '(' + second + ')' : ''}}</i-button>
            </div>
        </div>

        <Row slot="footer">
            <Button type="text" @click="setVisibility(false)">取消</Button>
            <Button type="primary" :loading="loading" @click="handleSubmit">{{platform_id === 2 ? '确认切换' : '申请开通'}}</Button>
        </Row>
    </Modal>
</template>

<script>
/**
 * 资金-线上充值功能介绍
 */
// import { mapState } from 'vuex';
import { http, api } from '@/libs/http'
import captcha from '@/views/captcha'

export default {
  name: 'recharge-introduction',
  props: {
    show: Boolean,
    clientPhone: [Number, String],
    paramsData: {
      default: {},
      type: Object
    },
    isChangeAccountType: {
      // 是否是切换账户类型
      default: false,
      type: Boolean
    },
    platform_id: {
      default: 1, // 1 => 银联 2 => 支付宝
      type: Number
    }
  },
  components: {
    captcha
  },
  watch: {
    show (n) {
      if (n) {
        this.reset = false
      } else {
        this.refresh()
      }
    }
  },
  data () {
    return {
      reset: false,
      captchaResult: '',
      second: 0,
      timer: null,
      code: '',
      loading: false,
      sending: false
    }
  },
  methods: {
    /**
        *  关闭短信弹窗
        */
    setVisibility (val) {
      this.$emit('update:show', val)
    },

    /**
        * 获取成功之后开通
        */
    handleSubmit () {
      if (this.platform_id === 1) {
        this.UnionPay()
      } else {
        this.AlipayPay()
      }
    },

    AlipayPay () {
      if (this.code) {
        this.$emit('Alipay', this.code)
      } else {
        this.$Message.error('请输入短信验证码')
      }
    },

    async UnionPay () {
      try {
        this.loading = true
        if (this.code) {
          if (!this.isChangeAccountType) {
            // 提交审核
            const res = await this.validSmsCode()
            if (res) this.handleSuccess()
          } else {
            // 切换账户类型
            this.$emit('changeAccountType', this.code)
          }
        } else {
          this.$Message.error('请输入短信验证码')
        }
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    },

    /**
        * 提交审核
        */
    validSmsCode () {
      this.paramsData.msg_code = this.code
      return http.req(api.audit_create, null, this.paramsData)
    },

    /**
        * 短信验证成功
        */
    handleSuccess () {
      this.setVisibility(false)
      this.$emit('confirm')
    },

    /**
        * 图形验证码成功
        */
    handleCaptcha (res) {
      this.captchaResult = res
    },

    /**
        * 点击按钮发送短信验证码
        */
    async handleSmsCode () {
      try {
        if (this.sending) return
        this.sending = true
        if (!this.captchaResult) {
          this.$Message.error('请完成图形验证')
        } else {
          const res = await this.sendCode()
          if (res) this.startTimer()
          else this.refresh(true)
        }
      } catch (err) {
        console.log(err)
        this.refresh(true)
      } finally {
        this.sending = false
      }
    },

    /**
        * 刷新短信验证码
        */
    refresh (flag = false) {
      if (flag) this.reset = false
      setTimeout(() => {
        this.reset = true
      }, 500)
      this.captchaResult = ''
      this.second = 0
      this.code = ''
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    /**
        * 发送短信验证码
        */
    sendCode () {
      return http.req(api.sms, null, {
        captcha_code: this.captchaResult
      })
    },

    /**
        *  倒计时
        */
    startTimer () {
      this.second = 60
      this.timer = setInterval(() => {
        if (this.second === 0) {
          clearInterval(this.timer)
          this.timer = null
        } else {
          this.second--
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.ri {
    &-container {
        padding: 20px;
    }

    &-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    &-content {
        margin-bottom: 20px;
    }

    &-captcha {
        width: 200px;
        display: inline-block;
        vertical-align: middle;
    }
}
</style>